<template>
  <div>
    <!-- 图片上传框框
    1.action后端服务器地址 发送请求上传图片到指定服务器
    fileList 默认展示几张图片
    2.:on-preview="handlePreview"点击+号时预览
    3.:limit="x" 配置最大上传数量
    4.on-remove垃圾桶删除 图片 只能看到效果实际上没有真的改变数据
    5.http-request只要配置了这个函数  发请求上传图片 覆盖默认上传行为
    6.on-change 添加上传成功上传失败都会
    7.before-upload 上传文件之前执行 校验 false停止上传
     -->
    <el-upload
      :class="{disabled:disabled}"
      list-type="picture-card"
      action="#"
      :file-list="fileList"
      :on-preview="handlePreview"
      :limit="limit"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>

    <!-- 进度条 -->
    <!-- <el-progress :text-inside="true" :stroke-width="20" :percentage="percent" style="width:300px" /> -->

    <!-- 图片预览对话框 -->
    <el-dialog title="图片预览" :visible="imgShow" @close="imgShow = false">
      <img :src="imgSrc" alt="" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
// 这个cos实例可以用于请求存储桶
const cos = new COS({
  SecretId: 'AKIDSyV80Ir2kF5JtptMFKjWoSUbVetQ940D', // 身份识别ID
  SecretKey: 'MfIyb4JKCrHSN3UgcJlzyjHch4D7mBLH' // 身份秘钥
})
export default {
  name: 'ImgUpload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 没上传想预览给 filelist
      fileList: [],
      // 对话框图片的显示否
      imgShow: false,
      // 对话框图片的路径
      imgSrc: ''
      // 进度条
      // percent: 0
    }
  },
  computed: {
    // 根据预览图片数组的长度和limit计算控制添加图片框显示与隐藏
    disabled() {
      return this.fileList.length >= this.limit
    },
    // 头像所有上传成功
    isAllUploadSuccess() {
      return this.fileList.every(item => item.status === 'success')
    }

  },
  methods: {
    // 控制预览 点击+打开对话框
    handlePreview(file) {
      this.imgShow = true
      this.imgSrc = file.url
    },
    // 删除图片
    handleRemove(file, fileList) {
      // file删除文件的对象
    // fileList页面结构中的文件列表 !!不是我们的
      //   手动过滤
      //   this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      this.fileList = [...fileList]
    },

    // 上传图片的校验
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 1

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 1MB!')
        return false
      }
      return true
    },
    // 上传图片
    handleUpload(obj) {
      // 找到需要更新对象的文件
      const fileObj = this.fileList.find(item => item.uid === obj.file.uid)
      // 开启上传之前开启Loaing
      fileObj.status = 'uploading'
      cos.putObject({
        Bucket: 'hrsass-95-1312315613', // 存储桶名字
        Region: 'ap-shanghai', // 存储桶所在地址
        Key: parseInt(Math.random() * 9999) + obj.file.name, // 存储文件名
        StorageClass: 'STANDARD', // 默认标准存储
        Body: obj.file, // 即将上传的文件对象
        // 每上传一丢丢就会触发执行 进度函数
        onProgress: (progressData) => {
          // 防止太快了 一定要让你看到
          setTimeout(() => {
            fileObj.percentage = parseInt(progressData.percent * 100)
          }, 1000)
        }
      }, (err, data) => {
        // 一定要箭log头函数 this 组件
        console.log(err || data)
        if (err) {
          console.log(err)
          return
        }
        fileObj.status = 'success'
        fileObj.url = 'https://' + data.Location
      })
    },
    // 图片变化时 赋值给本地的图片
    handleChange(file, filelist) {
      this.fileList = [...filelist]
    }
  }
}
</script>

<style lang="scss" scoped>
.disabled {
    ::v-deep{
        .el-upload--picture-card {
            display: none;
        }
    }
}
</style>
